<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="css/user.css"/>
</head>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="elementui/index.js"></script>
<body>

<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
			<th>邮箱</th>
            <th>操作</th>
        </tr>
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
			<td>{{user.email}}</td>
            <td>
                <button v-on:click="updateUserById(user)">修改</button>
                <button v-on:click="deleteUserById(user)">删除</button>
            </td>

        </tr>
    </table>

    <!-- 修改用户弹层 -->
    <el-dialog title="修改用户" align="left" :visible.sync="dialogUptFormVisible" width="40%" top="8vh">
        <el-form label-width="120px" :model="updateUser" :rules="rules" ref="uptForm">
            <el-form-item label="用户名：" prop="userName">
                <el-input v-model="updateUser.userName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="updateUser.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="用户姓名：" prop="name">
                <el-input v-model="updateUser.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="用户年龄：" prop="age">
                <el-input v-model="updateUser.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="updateUser.sex"  placeholder="请选择">
                    <el-option
                            v-for="item in sexed"
                            :key="item.index"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                        v-model="updateUser.birthday"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="邮箱：" prop="email">
                <el-input v-model="updateUser.email" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleUpdateCancel">取 消</el-button>
            <el-button type="primary" @click="handleUpdateConfirm">确 定</el-button>
        </div>
    </el-dialog>
    <!-- end -->

</div>
</body>

<script>

    var vue = new Vue({
        el:"#app",
        data:{
            userList:[],
            user:{ // 用户数据
                userName: "",
                password: "",
                name:"",
                age:"",
                sex: "",
                birthday:"",
                email: "",
            },
            sexed:[
                {
                    value:1,
                    label:"男"
                },
                {
                    value:0,
                    label:"女"
                }
            ]
        },
        created(){
            this.getAllUser();
        },
        methods: {
            getAllUser() {
                axios.get("http://localhost:8082/findAll").then(response => {
                    console.log(response)
                    let userData = response.data;
                    for (let i = 0; i < response.data.length; i++) {
                        if (userData[i].sex == 1) {
                            userData[i].sex = "男";
                        } else {
                            userData[i].sex = "女";
                        }
                        userData[i].birthday = userData[i].birthday;
                    }
                    this.userList = userData;
                })
            },
            deleteUserById:function(user){
                var _index = this.userList.indexOf(user);
                axios.get('/deleteUserById/' + user.id).then(response => {
                    this.userList.splice(_index,1);
                });
            },
            // 修改用户
            handleUpdate(user) {
                var t = this;
                if (t.$refs['uptForm']) {
                    t.$refs['uptForm'].resetFields();
                }
                console.log(user.id)

                this.updateId.id = user.id;
                axios.get("http://localhost:8081/findUserById",{
                    "params":this.updateId
                })
                    .then(response=>{

                        var userUpdate = response.data;

                        if(userUpdate.sex == 1){
                            userUpdate.sex = "男";
                        }else{
                            userUpdate.sex = "女";
                        }
                        userUpdate.birthday = userUpdate.birthday.substr(0,10);
                        this.updateUser = userUpdate;

                    })


                t.dialogUptFormVisible = true;

            },
        }
    })

</script>
</html>